import React, {useEffect, useRef} from "react";
import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
import {ControlBar} from "../../control-bar";
import { getSkills, saveSkills} from "../../../redux";
import {MyIcon, SuTitle} from "../../su-title";
import {ClsControl} from "../../block-control";
import {MyEditor} from "../../my-editor";
import {IDomEditor} from "@wangeditor/editor";

export const RSkills: React.FC = () => {

    const editRef = useRef<{editor: IDomEditor} | null>();
    const skills = useAppSelector(getSkills);
    const dispatch = useAppDispatch();

    return <ClsControl
        canDrag={true} controlBar={
        <ControlBar style={{top: 0}} displayConfig={{}}/>
    }>
        <SuTitle title='相关技能' icon={<MyIcon type={"jinengfen"}/>}/>
        <MyEditor
            ref={editRef}
            defaultHtml={skills}
            onContentChange={(html) => {
            dispatch(saveSkills(html))
    }}
    />
    </ClsControl>
}

